<template>
  <div class="mod-config">
    <basic-container>
      <div v-if="ymLoad" class="duiQitishi">
        <div class="tiShiTu">
          <img src="/images/qita/tishi.png" width="300">
        </div>
        <div class="tiShi">
          <div><b>您现在不是任何部门的奖金管理人员，无法进行奖金剔除操作</b></div>
          <div class="font18 mt10">您可以通知系统管理员，为您设置具体的奖金管理部门！</div>
        </div>
      </div>
      <div class="boxsty zhiBiao" v-else>
        <div class="flex justifyContentSpaceBetween">
          <div class="tabletext">统计年度已发放奖金</div>
        </div>
        <div>
          <el-form
            :inline="true"
            class="form-inline"
            label-width="80px"
          >
            <el-form-item label="年份">
              <el-date-picker
                v-model="years"
                type="year"
                placeholder="选择年">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="处理部门">
              <el-select v-model="deptCode" placeholder="请选择负责部门" class="xiaLa mr20" @change="deptCodeChangeHandle">
                <el-option v-for="(item,index) in bmData" :key="index" :label="item.deptName"
                           :value="item.deptCode"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div :height="searchheight">
          <span
            style="float: right; margin-top: -30px; cursor: pointer"
            @click="searchAdvancedChangeHandle"
          >{{ searchAdvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="
                searchAdvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "
            />
          </span>
          <!--    可展开搜索区      -->
          <div v-show="searchAdvanced">
            <el-form
              :inline="true"
              :model="dataForm"
              @keyup.enter.native="getDataList()"
              class="form-inline"
              label-width="80px"
            >
              <el-form-item label="人员姓名">
                <el-input v-model="dataForm.ryName" style="width: 90%"/>
              </el-form-item>
              <el-form-item label="人员编号">
                <el-input v-model="dataForm.ryCode" style="width: 90%"/>
              </el-form-item>
              <el-form-item label="工作单位">
                <deptAvueInputTree ref="searchDeptTree" v-model="dataForm.deptCode"
                                   @returnDeptCode="returnDeptCodeFromAvueInputTree"/>
              </el-form-item>
              <el-form-item label="奖金分类">
                <el-select :clearable="true" v-model="dataForm.jjxFl" placeholder="请选择" class="xiaLa"
                           style="width: 90%">
                  <el-option v-for="(item,index) in  jjflOptions " :key="index" :label="item.label" :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="奖金项">
                <el-select :clearable="true" v-model="dataForm.jjxMc" placeholder="请选择" class="xiaLa"
                           style="width: 90%">
                  <el-option v-for="(item,index) in  jjxMcOptions " :key="index" :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="发放时间">
                <el-date-picker
                  v-model="dataForm.monthRange"
                  type="monthrange"
                  range-separator="至"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份">
                </el-date-picker>
              </el-form-item>
              <!--  人员职级编码 允许多选            -->
              <el-form-item label="职级">
                <el-select :clearable="true" v-model="dataForm.ryZjbm" placeholder="请选择" class="xiaLa"
                           multiple style="width: 90%">
                  <el-option v-for="(item,index) in  ryZjbmOptions " :key="index" :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  class="marginLeft"
                  :disabled="deptCode===''"
                  @click="getDataList(1)"
                  plain
                >检索
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <!--  功能按钮区，左右分布        -->
          <div style="height: 50px; border-bottom: 1px solid #b0bde2">
            <!--            <el-tooltip
                          class="item"
                          effect="dark"
                          content="新增奖金项信息"
                          placement="top"
                        >
                          <el-button
                            icon="el-icon-plus"
                            type="primary"
                            v-if="permissions.jiangjin_jiangjinjjxxxb_add"
                            @click="addOrUpdateHandle()"
                            circle
                          ></el-button>
                        </el-tooltip>-->
            <div class="pull-right"></div>
          </div>
          <!--   表格区       -->
          <el-table :data="dataList"
                    ref="jjxTable"
                    v-loading="dataListLoading" stripe tooltip-effect="light" height="480px"
                    class="avue-crud">
            <el-table-column
              type="selection"
              width="55"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column label="序号" align="center" :formatter="nShowIndex" min-width="30"></el-table-column>
            <el-table-column prop="ryCode" label="人员编号" align="center" min-width="80"></el-table-column>
            <el-table-column prop="ryName" label="人员名称" align="center" min-width="60"></el-table-column>
            <el-table-column prop="deptName" label="工作单位" align="center" min-width="100"></el-table-column>
            <el-table-column prop="ryZw" label="职务" align="center" min-width="200"></el-table-column>
            <el-table-column prop="ryZjbm" label="人员职级编号" v-if="false" align="center" min-width="50"></el-table-column>
            <el-table-column prop="ryZjmc" label="职级" align="center" min-width="150"></el-table-column>
            <el-table-column prop="remark" label="奖金项分类" align="center" min-width="150"></el-table-column>
            <el-table-column prop="totalFee" label="奖金金额" align="center" min-width="120"></el-table-column>
            <el-table-column prop="resultTotalFee" align="center" label="剔除后结果" min-width="120"></el-table-column>
            <!--<el-table-column label="操作" width="300">
                        <template slot-scope="scope">
                          <el-button v-if="permissions.jiangjin_jiangjinjjxxxb_edit" type="primary" plain
                                     @click="addOrUpdateHandleJjGyZt(scope.row)">{{ scope.row.jjxGyzt == 1 ? '私用' : '公用' }}
                          </el-button>
                        </template>
                      </el-table-column>-->
          </el-table>
          <div class="avue-crud__pagination">
            <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                           :current-page="pageIndex"
                           :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" background
                           layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
          </div>
        </div>
      </div>
    </basic-container>
  </div>
</template>

<script>
import tichuResultController from "@/api/jiangjin/tichuResultController";
import tichuDetailController from "@/api/jiangjin/tichuDetailController";
import {mapGetters} from "vuex";
import {remote as remoteDict} from "@/api/admin/dict";
import {getJiangJinBm} from "@/api/admin/dept";
import deptAvueInputTree from '@/views/admin/dept/dept-avue-input-tree'

export default {
  name: "tichuResultIndex",
  components: {deptAvueInputTree},
  data() {
    return {
      //---无权限提示---------
      ymLoad: false,
      //---------------搜索条------------------
      searchAdvanced: true,
      searchheight: "0",
      //--------------静态内容（如字典值，只需要加载一次）-------------
      jjflOptions: [],//所有的ECC奖金项列表
      jjxMcOptions: [],//当前负责部门奖金项名称列表，只取不重复的名称
      ryZjbmOptions: [],//所有职务级别，默认选中二级正和二级副，来自于字典表类型为user_zj的项
      //--------------搜索条件--------------
      dataForm: {
        monthRange: '',
      },
      //-------------非静态内容-----------
      years: '',
      deptCode: '', //负责部门ID
      deptName: '', //负责部门名称
      bmData: [], //负责部门列表
      //-----------汇总数据表-------------
      dataList: [],//数据内容
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      dataListLoading: false,//加载提示控制
    }
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  created() {
    remoteDict("jingjinFenLei").then(response => {
      this.jjflOptions = response.data.data
    })
    remoteDict("user_zj").then(response => {
      this.ryZjbmOptions = response.data.data
    })

  },
  mounted() {
    this.getJiangJinJg();
  },
  methods: {
    searchAdvancedChangeHandle() {
      this.searchAdvanced = !this.searchAdvanced;
      if (this.searchAdvanced) {
        this.searchheight = "50";
      }
    },
    //获取当前用户奖金管理人机构
    getJiangJinJg() {
      getJiangJinBm().then(({data}) => {
        if (data.data != null && data.data.length > 0) {
          this.bmData = data.data
          this.ymLoad = false;
          this.deptCode = data.data[0].deptCode;
          this.deptName = data.data[0].name;
          this.initSearchDeptTree()
          this.getDataList();
        } else {
          this.$notify.closeAll();
          this.ymLoad = true;
        }
      }).catch(err => {
        this.ymLoad = true;
      });
    },
    //------------固定条件及搜索区--------------
    //切换用户管理的部门,联动重置搜索条件中的部门树根节点
    deptCodeChangeHandle() {
      this.initSearchDeptTree()
      this.getDataList()
    },
    //搜索条件的组织机构是树形结构，当管理员负责多个部门时，每次切换负责部门，搜索条件中的部门树根节点也随之切换
    initSearchDeptTree() {
      this.$refs.searchDeptTree.init(this.deptCode)
    },
    returnDeptCodeFromAvueInputTree(val) {
      this.dataForm.deptCode = val
    },
    //------------汇总数据表格---------------
    // 获取数据
    getDataList() {

    },
    nShowIndex(row, column, cellValue, index) {
      return index + 1 + this.pageSize * (this.pageIndex - 1);
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
  }
}
</script>

<style scoped>

</style>
